<template>
  <div class="home">
    <!-- 首页上方大图片 -->
    <div class="bannerContainer">
      <div class="banner">
        <a href="javascript:;">
          <img src="../../../public/1660792633ebeaab.webp" alt="" />
        </a>
      </div>
    </div>
    <!-- 首页轮播图（图片展示） -->
    <div class="swipper">
      <div class="swipper-con"  v-to-detail="router">
        <div class="swipper-head">
          新品首发
          <span class="swipper-subHeads">为你寻觅世间好物</span>
          <span class="swipper-rights">更多新品></span>
        </div>
        <Carousel />
      </div>
    </div>
    <!-- 人气推荐 -->
    <div class="PopularItem" v-if="recommend">
      <div class="commonItem">
        <div class="comm_header">
          <div class="comm_header_left">
            <a href=""><h3>人气推荐</h3></a>
            <div class="navList">
              <div
                :class="{ navItem: true, active: !isNav }"
                @click="isNav = 0"
              >
                编辑推荐
              </div>
              <div :class="{ navItem: true, active: isNav }" @click="isNav = 1">
                热销总榜
              </div>
            </div>
          </div>
          <div class="comm_header_right">
            <a href="">更多推荐></a>
          </div>
        </div>
        <div class="showContainer">
          <div class="show_left">
            <div class="show_top">
              <a href=""
                ><img :src="!isNav ? recommend.imgUrl : hot.imgUrl" alt=""
              /></a>
            </div>
            <div class="show_bottom">
              <h4 class="name">
                <span>{{ !isNav ? recommend.title : hot.title }}</span>
              </h4>
              <p>
                <span class="Price"
                  ><span class="pricemo"
                    ><span>￥</span
                    ><span>{{
                      !isNav ? recommend.nowPrice : hot.nowPrice
                    }}</span></span
                  ><span class="counterPri"
                    ><span
                      >￥{{ !isNav ? recommend.oriPrice : hot.oriPrice }}</span
                    ></span
                  >
                </span>
              </p>
            </div>
          </div>
          <div class="show_right">
            <div
              class="show_right_item"
              v-for="item in !isNav
                ? recommend.productExhibition
                : hot.productExhibition"
              :key="item.id"
            >
              <div class="item_img">
                <img :src="item.imgUrl" alt="" />
              </div>
              <div class="item_word">
                <h4 class="name">
                  <span>{{ item.title }}</span>
                </h4>
                <p class="price">
                  <span class="price_red">￥{{ item.nowPrice }}</span>
                  <span class="price_black">￥{{ item.oriPrice }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分类楼层 -->
    <div class="classify-wrap" v-to-detail="router">
      <Classify v-for="(floor, index) in floors" :key="index" :floor="floor" />
    </div>
    <!-- 甄选家 -->
    <div class="message">
      <div class="container">
        <div class="tpo">
          <h3>甄选家</h3>
          <span>我们在寻找，对生活有态度的你</span>
        </div>
        <div class="common">
          <div class="left">
            <a href=""
              ><img
                src="https://yanxuan.nosdn.127.net/b21b20f34d5007f961c182273a5d429f.jpg?type=webp&imageView&quality=95&thumbnail=690y380"
                alt=""
            /></a>
          </div>
          <div class="right">
            <div class="left_img">
              <img
                src="https://yanxuan.nosdn.127.net/9548e1f1a0ba0436cb13d586c50284be.jpg?type=webp&imageView&quality=95&thumbnail=390y185"
                alt=""
              />
            </div>

            <div class="left_bottom">
              <img
                src="https://yanxuan.nosdn.127.net/4a56bf536141eb2ad84f8f8f0e0418ab.jpg?type=webp&imageView&quality=95&thumbnail=390y185"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 销售排行榜 -->
    <SaleRank :isFixed="isFixed" />
    <!-- 右侧滑块 -->
    <WTopSlider :isFixed="isFixed" />
  </div>
</template>
<script lang="ts">
  export default {
    name: "WHome",
  };
</script>
<script setup lang="ts">
  import throttle from "lodash/throttle";
  import WTopSlider from "@/components/WTopSlider/index.vue";
  import Carousel from "./Carousel/index.vue";
  import Classify from "./Classify/index.vue";
  import SaleRank from "./SaleRank/index.vue";
  import { ref, onMounted } from "vue";
  import { useHomeStore } from "@/stores/modules/home";
  import { storeToRefs } from "pinia";
  import { useRouter } from "vue-router";
  const router = useRouter();
  const isFixed = ref<boolean>(false);

  const isNav = ref<number>(0);
  const homeStore = useHomeStore();

  const { getRecommendList, getFloors } = homeStore;
  const { recommend, hot, floors } = storeToRefs(homeStore);

  onMounted(() => {
    getRecommendList();
    getFloors();
  });
  window.onscroll = throttle(() => {
    window.scrollY > 400 ? (isFixed.value = true) : (isFixed.value = false);
  }, 100);
</script>
<style scoped lang="less">
  .home {
    height: 100%;
  }
  .bannerContainer {
    height: 420px !important;
    width: 100%;
    background-color: antiquewhite;
    overflow: hidden;
    .banner {
      width: 100%;
      height: 100%;
      // background-color: red;
      img {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
  .swipper {
    // width: 1090px;
    width: 100%;
    height: 510px;
    padding-top: 30px;
    background-color: #fff;
    text-align: center;
    .swipper-con {
      width: 1090px;
      height: 100%;
      display: inline-block;
      .swipper-head {
        text-align: left;
        font-size: 25px;
        padding-bottom: 20px;
        font-weight: bold;
        .swipper-subHeads {
          font-size: 14px;
          margin-left: 10px;
        }
        .swipper-rights {
          float: right;
          font-size: 16px;
          margin-top: 10px;
          cursor: pointer;
          &:hover {
            color: #bb9658;
          }
        }
      }
    }
  }

  .PopularItem {
    width: 100%;
    height: 618px;
    padding: 60px 0;
    background-color: #f4f0ea;
    margin-bottom: 60px;

    .commonItem {
      width: 1090px;
      height: 100%;
      margin: 0 auto;
      background-color: #fff;

      // background-color: aqua;
    }
  }
  .comm_header {
    width: 100%;
    height: 28px;
    padding: 0 0 20px;
    display: flex;
    justify-content: space-between;
    background-color: #f4f0ea;

    .comm_header_right {
      color: #333;
      font-size: 14px;
      text-decoration: none;
      margin-right: 30px;
      padding: 14px 0 0;
    }
    .comm_header_left {
      display: flex;
      h3 {
        margin-right: 20px;
        font-size: 28px;
        color: #333;
        font-weight: 600;
      }
      .navList {
        display: flex;
        padding-left: 13px;
        .navItem {
          width: 70px;
          margin-right: 55px;
          font-size: 14px;
          color: #333;
          height: 28px;
          line-height: 28px;
          text-align: center;
          cursor: pointer;
          &.active {
            color: #b4a078;
            border-bottom: 2px solid #b4a078;
          }
        }
      }
    }

    .PopularItem {
      width: 100%;
      height: 618px;
      padding: 60px 0;
      background-color: #f4f0ea;
      margin-bottom: 60px;
    }
  }
  .showContainer {
    display: flex;
  }
  .show_left {
    width: 390px;
    height: 570px;
    margin-right: 10px;
    overflow: hidden;
    // background-color: pink;
    .show_top {
      width: 390px;
      height: 400px;
      margin-bottom: 18px;
      overflow: hidden;

      img {
        height: 320px;
        width: 320px;
        cursor: pointer;
        margin-left: 35px;
        margin-top: 40px;
        &:hover {
          transform: scale(1.2);
          transition: all 1.5s;
        }
      }
    }
    .show_bottom {
      width: 390px;
      height: 123px;
      .name {
        height: 52px;
        line-height: 26px;
        text-align: center;
        width: 248px;
        font-size: 18px;
        margin: 0 auto 13px;
        span {
          color: #333;
          font-weight: bold;
        }
      }
      p {
        margin: 0;
        padding: 1px 0 9px;
        // color: #d4282d;
        line-height: 18px;
        text-align: center;
        .pricemo {
          color: #d4282d;
        }
        .counterPri {
          color: #999;
          font-size: 14px;
          display: inline;
        }
      }
    }
  }
  .show_right {
    width: 689px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .show_right_item {
      height: 280px;
      margin-bottom: 10px;
      .item_img {
        width: 223px;
        height: 180px;
        text-align: center;
        cursor: pointer;
        overflow: hidden;
        margin-top: 5px;
        :hover {
          transform: scale(1.1);
          transform: all 0.3s ease-in;
        }
      }
      .item_word {
        font-size: 13px;
        width: 100%;
        height: 92.67px;
        .name {
          color: #333;
          cursor: pointer;
          line-height: 20px;
          margin: 0 auto 4px;
          width: 166px;
          text-align: center;
          margin-top: 20px;
          span {
            font-weight: bold;
          }
        }
        .price {
          margin: 0;
          padding: 1px 0 9px;
          line-height: 13px;
          text-align: center;
          height: 15px;
          // margin-top: 5px;
          .price_red {
            color: #d4282d;
            font-size: 13px;
          }
          .price_black {
            color: #999;
            font-size: 12px;
            text-decoration: line-through;
          }
        }
      }
    }
  }
  .message {
    width: 100%;
    height: 428px;
    padding-bottom: 50px;
    .container {
      width: 1090px;
      height: 100%;
      margin: 0 auto;
      // background-color: #999;
      .tpo {
        height: 28px;
        padding-bottom: 20px;
        // background-color: #d4282d;
        display: flex;
        h3 {
          font-size: 28px;
          font-weight: bold;
          color: #333;
          width: 84px;
          height: 28px;
          margin-right: 20px;
        }
        span {
          width: 196px;
          height: 14px;
          padding-top: 13px;
          color: #333;
          font-size: 14px;
        }
      }
      .common {
        display: flex;
        justify-content: space-between;
        .left {
          img {
            width: 690px;
            height: 380px;
          }
        }
        .right {
          height: 380px;
          .left_img {
            width: 390px;
            height: 50%;
            margin-right: 10px;
            img {
              height: 100%;
            }
          }
          .left_bottom {
            height: 50%;
          }
          img {
            height: 100%;
          }
        }
      }
    }
  }
</style>
